<template>
  <div>
    <van-nav-bar
      title="确认信息"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-notice-bar
      left-icon="volume-o"
      text="谨防诈骗，拒绝直接打款，如遇诱导到第三方社交软件付款请举报！"
    />
    <div class="box">
      <!-- 选择收货地址 -->
      <div class="address">
        <p style="margin:0;padding:15px">收货地址</p>
        <van-cell-group inset>
          <van-cell
            :title="moren.name"
            is-link
            @click="show=true"
          />
          <van-cell
            center
            :title="moren.tel"
            :label="moren.address"
            is-link
            @click="show=true"
          />
        </van-cell-group>
      </div>
      <!-- 商品信息 -->
      <div class="order">
        <div>
          <van-row style="padding:5px">
            <van-col span="6">
              <van-image
                width="2.2rem"
                height="2.2rem"
                :src="'apis/kuan_api/trade/'+shop.filelist"
                fit="contain"
              />
            </van-col>
            <van-col span="18">
              <!-- 订单标题 -->
              <p
                class="txt"
                style="font-size:15px"
              >
                {{shop.title}}
              </p>
              <!-- 商品参数 -->
              <p style="color:lightgray;margin:5px">
                {{shop.yunxing}} + {{shop.rongliang}}
              </p>
              <!-- 商品价格 -->
              <p
                class="txt"
                style="font-size:18px;text-align:right;margin-bottom:10px"
              >
                ￥{{shop.price}}
              </p>
            </van-col>
          </van-row>
        </div>
      </div>
      <div class="sale_info">
        <!-- 卖家昵称 -->
        <van-row>
          <van-col
            span="17"
            :offset="1"
          >
            <p>
              卖家昵称：</p>
          </van-col>
          <van-col span="6">
            <p>
              {{shop.user_nickname}}</p>
          </van-col>
        </van-row>
        <!-- 订单编号 -->
        <van-row>
          <van-col
            span="17"
            :offset="1"
          >
            <p>
              订单编号：</p>
          </van-col>
          <van-col span="6">
            <p>
              {{shop.OrderNum}}</p>
          </van-col>
        </van-row>
        <!-- 邮费 -->
        <van-row>
          <van-col
            span="17"
            :offset="1"
          >
            <p>
              邮费：</p>
          </van-col>
          <van-col span="6">
            <p v-if="shop!='' &&shop.otherinfo.search('包邮')!=-1">
              包邮</p>
            <p v-else>
              12元</p>
          </van-col>
        </van-row>
        <!-- 总价 -->
        <van-row>
          <van-col
            span="17"
            :offset="1"
          >
            <p>
              总价：</p>
          </van-col>
          <van-col span="6">
            <p style="color:red">￥{{shop.price}}</p>
          </van-col>
        </van-row>
      </div>
      <!-- 底部购买按钮 -->
      <div class="buy_btn">
        <van-button
          type="danger"
          block
          @click="pay=true"
        >购买
        </van-button>
      </div>
    </div>
    <!-- 修改收货地址弹出层 -->
    <van-popup
      v-model="show"
      round
      :style="{ width: '80%' }"
    >
      <van-address-list
        v-if="this.moren!=''"
        v-model="chosenAddressId"
        :list="address"
        default-tag-text="默认"
        @select="setaddress"
      />
    </van-popup>
    <!-- 付款弹出层 -->
    <van-popup
      v-model="pay"
      round
      :style="{ width: '80%',height:'56%' }"
      closeable
      close-icon-position="top-left"
      :close-on-click-overlay="false"
    >
      <div class="pay">
        <p style="font-size:25px;text-align:center">￥{{shop.price}}</p>
        <p>
          <van-collapse
            v-model="activeName"
            accordion
            style="width:80%;margin:0 auto"
          >
            <van-collapse-item
              title="请选择支付方式"
              name="1"
            >
              <van-radio-group v-model="payment">
                <van-radio
                  name="0"
                  style="padding-bottom:5px;font-size:18px"
                >
                  <van-icon name="paid" />钱包(余额:{{account.balance}})
                </van-radio>
                <van-radio
                  name="1"
                  style="padding-bottom:5px;font-size:18px"
                >
                  <van-icon
                    name="wechat"
                    class="wechat"
                  />微信
                </van-radio>
                <van-radio
                  name="2"
                  style="padding-bottom:5px;font-size:18px"
                >
                  <van-icon
                    name="alipay"
                    class="alipay"
                  />支付宝
                </van-radio>
              </van-radio-group>
            </van-collapse-item>
          </van-collapse>
        </p>
        <div class="pay_btn">
          <van-button
            type="primary"
            style="width:120px;border-radius:5px"
            @click="buy"
          >确认支付</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "buy",
  data() {
    return {
      payment: "0",
      activeName: 0,
      address: [],
      moren: [],
      show: false,
      chosenAddressId: "",
      ordernum: "",
      shop: [],
      pay: false,
      account: {},
    };
  },
  methods: {
    onClickLeft() {
      window.history.go(-1);
    },
    // 获取联系人
    getaddress() {
      this.axios
        .post("apis/kuan_api/address.php", {
          code: 0,
          userid: this.$store.state.user.user_id,
        })
        .then((res) => {
          this.address = res.data.data;
          this.address.forEach((element) => {
            if (element.contactFlag == 1) {
              this.moren = element;
              this.chosenAddressId = element.id;
            }
          });
        });
    },
    // 修改联系人
    setaddress(index) {
      this.axios
        .post("apis/kuan_api/address.php", {
          code: 1,
          id: index.id,
          userid: this.$store.state.user.user_id,
        })
        .then((res) => {
          this.$toast.success("修改成功");
          this.getaddress();
          this.show = false;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 获取商品信息
    getdetail() {
      this.axios
        .post("apis/kuan_api/order.php", {
          code: 2,
          ordernum: this.ordernum,
        })
        .then((res) => {
          this.shop = res.data.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 获取用户余额
    getaccount() {
      this.axios
        .post("apis/kuan_api/account.php", {
          code: 0,
          userid: this.$store.state.user.user_id,
        })
        .then((res) => {
          this.account = res.data.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 付款
    buy() {
      console.log(this.moren.name);
      if (
        this.moren.name == undefined &&
        this.moren.tel == undefined &&
        this.moren.address == undefined
      ) {
        this.$toast.fail("请到设置中心填写收货地址！");
      } else {
        if (this.account.balance * 1 > this.shop.price * 1) {
          this.axios
            .post("apis/kuan_api/account.php", {
              code: 1,
              userid: this.$store.state.user.user_id,
              price: this.shop.price,
              ordernum: this.ordernum,
              saleuser: this.shop.user_id,
              payment: this.payment,
              status: 0,
              contact: this.moren.name,
              Phone: this.moren.tel,
              addresses: this.moren.address,
            })
            .then((res) => {
              this.$toast.loading({
                message: "正在支付...",
                forbidClick: true,
              });
              setTimeout(() => {
                this.$toast.success("支付成功！");
                this.$router.push("/user");
              }, 1500);
            })
            .catch((err) => {
              console.error(err);
            });
        } else {
          this.$toast.fail("支付失败,余额不足！");
        }
      }
    },
  },
  created() {
    this.ordernum = this.$route.query.ordernum;
    this.getaddress();
    this.getdetail();
    this.getaccount();
  },
};
</script>

<style scoped>
.box {
  height: 100vh;
  background-color: lightgray;
}
.address {
  width: 95%;
  margin: 0 auto;
}
.lianxiren {
  padding: 3px;
  background-color: white;
  border-radius: 8px;
}
.buy_btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
.order {
  width: 95%;
  margin: 0 auto;
  margin-top: 15px;
  background-color: white;
  border-radius: 7px;
}
.sale_info {
  width: 95%;
  margin: 0 auto;
  margin-top: 15px;
  background-color: white;
  border-radius: 8px;
}
.pay {
  margin-top: 60px;
}
.pay_btn {
  width: 100%;
  position: fixed;
  bottom: 15px;
  text-align: center;
}
.wechat {
  color: #0fce1a;
}
.alipay {
  color: #0e78ff;
}
</style>